<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>02_生命周期</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <h2>当前的值为:{{a}}</h2>
    <button @click="add" id="btn">点击加1</button><br><br>
    <button @click="datch">毁灭吧</button>
  </div>
</body>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data() {
      return {
        a: 1
      }
    },
    methods: {
      add() {
        this.a += 1;
        // console.log(this.a);
      },
      datch() {
        this.$destroy()
      }
    },
    beforeCreate() {
      console.log('数据代理,数据劫持之前', this);  //数据代理,数据劫持之前之前  this是vm 此时方法数据都还没在vm身上
    },
    created() {
      console.log('数据代理,数据劫持完毕', this); //数据代理,数据之前完毕,this是vm 数据和方法在加载到vm的身上
      // debugger;
    },
    beforeMount() {
      console.log('挂载之前', this); //挂在之前, 都是未经Vue编译的代码 将要将虚拟dom转为真实dom 展示到页面上
      document.getElementById('btn').innerText = '改变按钮的文字' // 手动对真实dom的操作,最后都不会生效
      // debugger
    },
    mounted() {
      console.log('挂载完毕', this); //挂载完毕,页面都是经过Vue编译的dom;手动对dom的操作有效,但避免这种行为
      // debugger;
    },
    beforeUpdate() {
      console.log('更新之前', this); //数据是新的,页面是旧的,尚未保持同步
      // debugger
    },
    updated() {
      console.log('更新完毕', this); //数据和页面保持同步
      // debugger
    },
    beforeDestroy() {
      console.log('销毁之前', this); // 指令都处于可用状态,马上进行销毁过程
      // debugger
    },
    destroyed() {
      console.log('销毁完毕', this); // 组件被卸载,指令语法都处于禁用状态,数据方法全部丢失
      // debugger
    },
  })
</script>

</html>